<style>
    .cms-info-box{
        min-height: auto;
        padding: 8px;
        display: inline-block;
        margin: 0 10px 10px 0;
        border-radius: .25rem;
        color: #666;
        border: 1px solid #e5e6eb;
        box-shadow: none;
    }
    .cms-info-box.active{
        border: 1px solid #007bff;
    }
    .cms-info-box:hover{
        border: 1px solid #007bff;
    }
</style>
<form role="form" action="" class="frm-operate" method="post">
    <div class="card shadow-none">
        <div class="card-body">
            {volist name="rule_list" id="r"}
            <a href="#" class="cms-info-box {if condition="in_array($key,$admin_rule_list)"}active{/if}" data-rule_id="{$key}">
                <input type="checkbox" class="d-none ar-{$key}" {if condition="in_array($key,$admin_rule_list)"}checked{/if} name="auth_rule_id[]" value="{$key}">{:lang($r)}
            </a>
            {/volist}
        </div>
        <div class="card-footer">
            <div class="row justify-content-around">
                <div class="col-sm-10">
                    <button type="submit" class="btn btn-primary btn-submit">{:lang('Submit')}</button>
                    <button type="reset" class="btn btn-default">{:lang('Reset')}</button>
                </div>
            </div>
        </div>
    </div>
</form>

{block:script}
<script>
    require(['admin','form'], function (admin, Form) {
        // Form.api.init({success:function (data,res) {
        //         Layer.msg(res.msg,{time:1000, icon:1},function () {
        //             window.parent.location.reload();
        //         });
        //         return false;
        //     }});
        Form.api.init();
        $('.cms-info-box').click(function () {
            var auth_rule_id = $(this).data('rule_id');
            if ($(this).is('.active')) {
                $(this).removeClass('active');
                $('.ar-'+auth_rule_id).prop("checked",false);
            } else {
                $(this).addClass('active');
                $('.ar-'+auth_rule_id).prop("checked",true);
            }
        })
    })

</script>
{/block:script}
